<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = defineProps<{
    doctor: any
}>()

const router = useRouter()

const viewDoctorDetails = () => {
    router.push(`/doctor/${props.doctor.id}`)
}
</script>

<template>
    <div class="doctor-profile-card" @click="viewDoctorDetails">
        <div class="doctor-header">
            <img :src="doctor.avatar" class="doctor-avatar" alt="医生头像">
            <div class="doctor-info">
                <div class="doctor-name-title">
                    <span class="doctor-name">{{ doctor.name }}</span>
                    <span class="doctor-title">{{ doctor.get_title_display }}</span>
                </div>
                <div class="doctor-hospital">{{ doctor.hospital }}</div>
                <div class="doctor-specialty-line">
                    <span>擅长：</span><span class="doctor-specialty" v-html="doctor.specialty"></span>
                </div>
            </div>
            <div class="doctor-stats">
                <div class="stat">
                    <div class="stat-value">{{ doctor.rating }}</div>
                    <div class="stat-label">评分</div>
                </div>
                <div class="stat">
                    <div class="stat-value">{{ doctor.consultation_count }}</div>
                    <div class="stat-label">问诊量</div>
                </div>
            </div>
        </div>
        <button class="consult-btn" @click.stop="router.push(`/doctor/${doctor.id}`)">
            图文问诊 ¥{{ doctor.consultation_price }}
        </button>
    </div>
</template>

<style scoped>
.doctor-profile-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.doctor-profile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.doctor-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.doctor-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
}

.doctor-info {
    flex: 1;
}

.doctor-name-title {
    margin-bottom: 8px;
}

.doctor-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-right: 8px;
}

.doctor-title {
    font-size: 14px;
    color: #666;
}

.doctor-hospital {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}



.doctor-specialty {
    display: inline-block; /* 允许设置宽度、高度等，同时保持行内显示 */
    font-size: 14px;
    color: #666;
    align-items: flex-start;
}

.doctor-specialty-line {
    display: inline-block;
    flex: 1;
}

.doctor-stats {
    display: flex;
    gap: 20px;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.stat-label {
    font-size: 12px;
    color: #666;
}

.consult-btn {
    width: 100%;
    background: #00b96b;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.consult-btn:hover {
    background: #009d5d;
}
</style>